<template>
  <section id="sys-login">
    <div class="main-content p-clear">
      <!-- <div class="login-header p-clear">
        <div class="left-text p-left">

        </div>
        <div class="logo-text p-left">{{this.$baseInfo.BASE_TITLE}}</div>
      </div> -->
      <div class="center-container">
        <div class="bg-img p-clear">
          <div class="right-content p-right">
            <div class="right-login-box">
              <div class="login-content">
                <div class="login-title">
                </div>
                <div class="input-item p-clear"
                     :class="{'error-box': errorTips.userName}">
                  <div class="icon-user"></div>
                  <input type="text"
                         placeholder="请输入账号"
                         autofocus
                         v-model="userName" />
                  <div class="err-tips">{{errorTips.userName}}</div>
                </div>
                <div class="input-item p-clear"
                     :class="{'error-box': errorTips.passWord}">
                  <div class="icon-lock"></div>
                  <input type="password"
                         placeholder="请输入密码"
                         v-model="passWord"
                         @keyup.13="login" />
                  <div class="err-tips">{{errorTips.passWord}}</div>
                </div>
                <div style="padding:18px 0px; margin-top:-20px">
                  <el-checkbox v-model="checked">记住密码</el-checkbox>
                  <p style="float:right;color: #333333;">
                    <span>没有账号,</span>
                    <router-link to="/register"
                                 style="color:#345CAE;">去注册</router-link>
                  </p>
                </div>
                <el-button class="login-btn p-cursor"
                           @click="login()"
                           :loading="loading">{{loading?'正在登录...':'登录'}}</el-button>
              </div>
            </div>
            <div class="leftboxText">
              <div class="left-login-box">
                <div class="llei-content">
                  <div class="imgpleLogo"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="p-align-center login-footer">欢迎使用{{this.$baseInfo.BASE_TITLE}}</div> -->
    </div>
  </section>
</template>
<script>
import { sysLogin, getToken } from '../utils/apis/loginApi'
import { setNewToken, setNewIdenity } from '../utils/publicFun'
import { getMenusByUserId } from '../utils/apis/menuApi'
export default {
  name: 'login',
  data () {
    return {
      userName: '',
      passWord: '',
      checked: false,
      loading: false,
      errorTips: {
        userName: '',
        passWord: '',
        userId: ''
      }
    }
  },
  created () {
    this.listenOpera()
    if (localStorage.password) {
      this.checked = true
      this.passWord = localStorage.password
      this.userName = localStorage.userName
    }
  },
  methods: {
    login () {
      if (this.validate()) {
        this.loading = true
        sysLogin({
          username: this.userName,
          password: this.passWord
        }).then(res => {
          if (res.data.code === 200) {
            let userInfo = {
              userName: this.userName,
              realName: res.data.data.user.realname,
              userId: res.data.data.user.userId,
              password: this.passWord
            }
            this.loading = false
            localStorage.userInfo = JSON.stringify(userInfo)
            getToken({
              username: this.userName,
              password: this.passWord
            }).then(res => {
              this.loading = false
              if (res.status === 200) {
                setNewToken(res.data, 36000000)
                setNewIdenity(this.$baseInfo.LOGIN_OUT_TIME)
                if (this.checked) {
                  localStorage.password = this.passWord
                  localStorage.userName = this.userName
                } else {
                  localStorage.password = ''
                  localStorage.userName = ''
                }
                getMenusByUserId({ userName: this.userName }).then(res => {
                  if (res.data.code === 200) {
                    if (res.data.data !== null) {
                      this.treeData = res.data.data
                      localStorage.menuTree = JSON.stringify(res.data.data)
                      this.$router.push('/')
                    } else {
                      this.$message.error('该账户没有登录权限,请用其他账号登录')
                      setTimeout(() => {
                        localStorage.removeItem('userInfo')
                        localStorage.removeItem('tokenInfo')
                        location.href = '/login'
                      }, 500)
                    }
                  }
                })
              }
            })
          } else {
            this.loading = false
            for (let i in this.errorTips) {
              this.errorTips[i] = ''
            }
            this.errorTips.passWord = '用户名或密码错误'
          }
        }).catch(error => {
          this.loading = false
          console.log(error)
        })
      }
    },
    listenOpera () {
      document.onmousedown = setNewIdenity(this.$baseInfo.LOGIN_OUT_TIME)
      document.onscroll = setNewIdenity(this.$baseInfo.LOGIN_OUT_TIME)
      document.onkeypress = setNewIdenity(this.$baseInfo.LOGIN_OUT_TIME)
    },
    validate () {
      for (let i in this.errorTips) {
        this.errorTips[i] = ''
      }
      if (this.userName === '') {
        this.errorTips.userName = '请输入用户名'
        return false
      }
      if (this.passWord === '') {
        this.errorTips.passWord = '请输入密码'
        return false
      }
      return true
    }
  }
}
</script>
<style lang="less" scoped>
@import "~@/assets/css/login.less";
</style>
